<script setup lang="ts">
import Hometitle from '@/components/Home/title.vue'
import ZHometitle from '@/components/Home/ztitle.vue'
import Menjin from '@/components/securityEcharts/Menjin.vue';
import { get_Jiankong, get_JkHuaxiang, get_Zhiban } from '@/request';
import { onMounted, ref } from 'vue';
// import huaxiang from '../../assets/images/jiankonghuaxiang.jpeg'
const obj = ref()
onMounted(() => {
    get_Jiankong().then(resp => {
        console.log('监控情况', resp.data.data)
        obj.value = resp.data.data.result[0]
    })
})

const objs = ref()
onMounted(() => {
    get_Zhiban().then(resp => {
        console.log('值班情况', resp.data.data)
        objs.value = resp.data.data.result[0]
    })
})

const objes = ref()
onMounted(() => {
    get_JkHuaxiang().then(resp => {
        console.log('监控画像', resp.data.data)
        objes.value = resp.data.data.result[0]
    })
})
</script>

<template>
    <div class="container">
        <div class="top"></div>
        <div class="left">
            <div class="leftTop">
                <Hometitle title="监控情况"></Hometitle>
                <div id="jiankong">
                    <div v-for="item in obj" :key="item.id">
                        <img :src="item.img" alt="">
                        <div style="flex-direction: column;padding-left: 20px;line-height: 4vh;">
                            <p class="p1">{{ item.floor }}</p>
                            <p class="p2">设备数量：{{ item.equipmentNum }}</p>
                            <p>正常设备：{{ item.normalNum }} &emsp;故障设备：{{ item.handclapNum }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leftcenter">
                <Hometitle title="门禁情况"></Hometitle>
                <div class="menjin">
                    <Menjin></Menjin>
                    <div style="color: #fff;display: flex;width: 100%;;line-height: 5vh;flex-direction: column;">
                        <div
                            style="display: flex;justify-content: space-around;line-height: 5vh;width: 200px;height: 50px;">
                            <p>男生</p>
                            <p>女生</p>
                        </div>
                        <div style="display: flex;">
                            <div
                                style="color: #fff;width: 70px;justify-content: space-around;line-height: 5vh;margin-left: 10px;">
                                <p style="text-align: center;">332</p>
                                <p>E区寝室楼</p>
                            </div>
                            <div
                                style="color: #fff;width: 70px;justify-content: space-around;line-height: 5vh;margin-left: 10px;">
                                <p>387</p>
                                <p>F区寝室楼</p>
                            </div>
                            <div
                                style="color: #fff;width: 90px;justify-content: space-around;line-height: 5vh;margin-left: 10px;">
                                <p>123</p>
                                <p>D区寝室楼</p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="leftBottom">
                <Hometitle title="值班情况"></Hometitle>
                <div id="zhiban">
                    <div style="color: #fff; display: flex;
                    justify-content: space-around; width: 100%;
                    height: 4vh;line-height: 4vh;">
                        <p>#</p>
                        <p>姓名</p>
                        <p>时间</p>
                        <p>值班内容</p>
                        <p>联系电话</p>
                    </div>
                    <div class="zhi" v-for="item in objs" :key="item">
                        <p>{{ item.eegs_id }}</p>
                        <p>{{ item.eegs_name }}</p>
                        <p>{{ item.eegs_time }}</p>
                        <p>{{ item.eegs_dutyContent }}</p>
                        <p>{{ item.eegs_phone }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div style="margin: 160px 0 0 20px;height: 500px;">
                <img style="width: 100%;height: 100%;" src="../../assets/images/Photoan.png" alt="">
            </div>

            <div class="footer">
                <footernav></footernav>
            </div>

        </div>
        <div class="right">
            <div class="rightTop">
                <ZHometitle title="监控画像"></ZHometitle>
                <img class="image1" src="../../assets/images/jiankonghuaxiang.png" alt="">
                <img class="image1" src="../../assets/images/jiankonghuaxiang.png" alt="">
                <img class="image1" src="../../assets/images/jiankonghuaxiang.png" alt="">
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    position: relative;
    background-image: url('../../assets/images/pageBg.png');
    display: flex;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-image: url('../../assets/images/Top.png');
        background-size: 100% 80px;
        background-repeat: no-repeat;

    }

    .left {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .leftTop {
            margin: 60px 80px 0px 70px;
            height: 35vh;
            overflow: scroll;
            /* 允许滚动 */
            scrollbar-width: none;

            /* 隐藏滚动条（适用于Firefox） */
            .leftTop::-webkit-scrollbar {
                display: none;
                /* 隐藏滚动条（适用于Chrome、Safari） */
            }

            #jiankong {
                width: 98%;
                height: 800px;
                border: #7161e9 solid 1px;
                display: flex;
                overflow: hidden;
                color: #fff;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                div {
                    width: 90%;
                    height: 100px;
                    margin-bottom: 10px;
                    border: #7161e9 solid 1px;
                    display: flex;

                    img {
                        width: 220px;
                        height: 100px;
                    }

                    .p1 {
                        color: #7161e9;
                        font-size: 25px;
                    }

                    .p2 {
                        font-size: 23px;
                        color: #fff;
                    }

                    #pps {
                        display: flex;
                    }
                }
            }
        }

        .leftcenter {
            margin: 10px 80px 0px 70px;
            height: 18vh;

            .menjin {
                width: 100%;
                height: 14vh;
                border: #7161e9 solid 1px;
                display: flex;
                justify-content: space-around;
            }
        }

        .leftBottom {
            margin: 30px 80px 0px 70px;
            height: 32vh;

            #zhiban {
                width: 100%;
                height: 28vh;
                border: #4712f5 solid 1px;

                .zhi {
                    width: 100%;
                    height: 4vh;
                    line-height: 4vh;
                    background-color: #003b51;
                    display: flex;
                    color: #fff;
                    justify-content: space-around;
                }
            }
        }
    }

    .center {
        width: 36%;
        height: 100vh;
        position: relative;

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
        }
    }

    .right {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .rightTop {
            margin: 60px 80px 0px 70px;
            height: 90vh;

            .image1 {
                width: 100%;
                height: 25vh;
                border: #7161e9 solid 1px;
                margin-bottom: 20px;

            }
        }

    }
}
</style>
